<script type="text/javascript">
  var Connect = YAHOO.util.Connect,
      JSON = YAHOO.lang.JSON,
      Dom = YAHOO.util.Dom,
      Lang = YAHOO.lang;

  var gridId = "vcard";
  var updateButtonId = "update_button";
  var vcard;

  var gridModel = new YAHOO.TRZCINKA.VCARD.GridModel();

  YAHOO.util.Event.onContentReady(gridId, function() {
  vcard = new YAHOO.TRZCINKA.VCARD.VCard(gridId, gridModel);
  vcard.render();
  var gridDataString = '<%= escape_javascript @grid %>';
  if (!JSON.isValid(gridDataString)) {
      alert('INVALID!');
      }
  var gridData = JSON.parse(gridDataString);
  gridModel.loadGrid(gridData);
  });

  YAHOO.util.Event.onContentReady(updateButtonId, function(){
  var updateButton = new YAHOO.widget.Button(updateButtonId, {onclick: {fn:
  function() {

  var statusDiv = Dom.get('update_status');
  function hideStatusDiv() {
      Lang.later(2000, statusDiv, function(){
          Dom.setStyle(this, 'display', 'none');
          });
      };
  var url = '<%= grid_url(:format => 'json') %>';
  var callback = {
      success:
          function(){
              statusDiv.innerHTML = 'OK!';
              hideStatusDiv();
              },
      failure:
          function(o){
              statusDiv.innerHTML = 'Error: ' + o.statusText;
              hideStatusDiv();
              }
      };
  statusDiv.innerHTML = 'Updating...';
  Dom.setStyle(statusDiv, 'display', 'block');
  Connect.initHeader('Content-type', 'application/json', 'true');
  var transaction = Connect.asyncRequest('PUT', url, callback, JSON.stringify({grid: gridModel.getGridData()}));
  }

  }});

  });


</script>

<input type="button" id="update_button" value="Update"/>
<div id="update_status" style="display: none;"></div>
<div id="vcard" class="vcard"/>
